<template>
    <div class="mergepayqr">
        <div class="paycontent">
            <div class="title"><span class="leftline"></span><span>聚合收款码</span></div>
            <el-tag type="warning">提示：可以使用二维码内容，去创建有商户特色的二维码</el-tag>
            <br><br>
            <el-card class="box-card">
              <div class="text item">
                <el-table :data="tableData" v-loading="loading">
                  <el-table-column prop="id" label="收银员ID" width="80">
                    </el-table-column>
                    <el-table-column prop="nickname" label="归属收银员" width="150">
                    </el-table-column>
                    <el-table-column prop="username" label="聚合收款二维码" width="200">
                      <template slot-scope="scope">
                        <span><tz-qrcode class="qrcodeDemo" :data='scope.row.mergepayqr' :width='150'></tz-qrcode>
                          </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="mobile" label="二维码内容">
                      <template slot-scope="scope">
                        <span><el-tag>{{scope.row.mergepayqr}}</el-tag>
                          </span>
                      </template>
                    </el-table-column>
                    <el-table-column  label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button type="success" @click="savePic(scope.$index)">下载</el-button>
                      </template>
                    </el-table-column>
                </el-table>
              </div>
            </el-card>
            <br><br>
        </div>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
export default {
  mounted: function () {
    this.getcashierList();
  },
  data () {
    return {
      store_code: this.$route.query.store_code ? this.$route.query.store_code : '',
      valueversion: '',
      loading: false,
      tableData: []
    };
  },
  methods: {
    getcashierList () {
      let that = this;
      that.loading = true;
      http.get(api.cashierList, {
        token: localStorage.getItem('token'),
        mobile: that.mobile,
        nickname: that.nickname,
        store_code: that.store_code,
        pagesize: that.pageNum,
        page: that.page
      }, response => {
        console.log(response);
        that.tableData = response.data[0].result.data;
        that.loading = false;
      }, err => {
        console.log(err);
      });
    },
    savePic (index) {
      var canvasData = document.getElementsByClassName('qrcodeDemo')[index].children[0];
      var a = document.createElement('a');
      a.href = canvasData.toDataURL();
      a.download = 'drcQrcode';
      a.click();
    }
  }
};
</script>

<style lang="stylus" scoped>
.payment
  .paycontent
    margin: 10px 0
    padding:0 10px
    box-sizing:border-box
    background-color:#fff
    box-shadow: 1px 1px 1px #999
    font-size:14px
    color:#333
  .bluefont
    a
      color: #409EFF
      text-decoration: underline
  .title
    padding:20px 0px 15px 0px
    box-sizing:border-box
    font-size:16px
    color:#999
  .leftline
    width:5px;
    height:15px;
    display:inline-block
    background:#36ADCB
    margin-right:5px
 

</style>
